<template>
  <div id="app" class="wrapper">
    <img class="wrapper__img" src="./images/user.png" alt="user" />
    <div class="wrapper__input">
      <input
        v-model="userName"
        class="wrapper__input__content"
        type="text"
        placeholder="请输入用户名"
      />
    </div>
    <div class="wrapper__input">
      <input
        v-model="password"
        class="wrapper__input__content"
        type="password"
        placeholder="输入密码"
      />
    </div>
    <div class="wrapper__loginButton" v-on:click="Login">登陆</div>
    <div class="wrapper__register">
      <span>立即注册</span>
      <div class="seperator"></div>
      <span>忘记密码</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userName: '',
      password: ''
    };
  },
  methods: {
    // onclick事件
    Login() {
      console.log(this.userName, this.password);
      if (this.userName.length > 0 && this.password.length > 0) {
        alert(`用户名: ${this.userName} 密码: ${this.password}`);
      } else {
        alert("请输入用户名密码");
      }
    }
  }
};
</script>

